<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <router-link :to="'/core/integral-grade/edit/' + scope.row.id" style="margin-right: 5px">
            <el-button type="primary" size="mini" icon="el-icon-edit"> 修改 </el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeId(scope.row.id)">删除</el-button>
          <!-- <el-button type="text" size="small">编辑</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/**
 * 它实际上也是一个独立的模块儿，这个独立的模块儿呢它怎么导出呢？也通过这种方式导出。
 * 所以呢，这个里面导出的是什么呢？实际上就是导出的我们礼物里面的一些基本的核心功能什么呢？
 * 我这样一写，大家就知道了data呀。还有呢？methods还有呢created是不是这个其实导出的就是一个vue对象啊？
 * 呃，只不过我们没有在这个地方去new vue对象，而是通过导出模块儿的方式啊，把这个vue对象导出去
 * 导入在路由模块中导入
 */
import integralGradeApi from '@/api/core/integral-grade'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const { data: res } = await integralGradeApi.list()
      // console.log(res)
      this.list = res.list
    },
    async removeId(id) {
      console.log('id', id)

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { message } = await integralGradeApi.removeById(id)
          this.$message({
            message: message,
            type: 'success'
          })
          this.fetchData()
        })
        .catch(error => {
          console.log('catch的error', error)
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
    }
  }
}
</script>

<style scoped></style>
